<script setup>
import { useRouter } from 'vue-router'
import click from '@/services/clickSound'
const router = useRouter()

async function onLeftClick() {
  try { await click.play() } catch (_) {}
  console.log('点击：开房间')
  router.push('/pre-create-room')
}
async function onCenterClick() {
  try { await click.play() } catch (_) {}
  console.log('点击：开始匹配')
}
async function onRightClick() {
  try { await click.play() } catch (_) {}
  console.log('点击：娱乐模式')
}
</script>

<template>
  <div class="start-game">
    <div class="left clickable" @click="onLeftClick">开房间</div>
    <div class="center clickable" @click="onCenterClick">开始匹配</div>
    <div class="right clickable" @click="onRightClick">娱乐模式</div>
  </div>
  
</template>

<style scoped>
.start-game {
  width: 100%;
  height: 100%;
  display: flex;
}
.left {
  height: 100%;
  flex: 0 0 25%;
  background-color: #00ffffaa;
  /* 右上 ~100°（较大内缩），右下 ~80°（较小内缩） */
  clip-path: polygon(0 0, 82% 0, 92% 100%, 0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2em; /* 放大两倍 */
}
.center {
  height: 100%;
  flex: 0 0 50%;
  background-color: #6495edaa;
  /* 近似：左上/右上 ~80°，左下/右下 ~100° */
  clip-path: polygon(8% 0, 92% 0, 82% 100%, 18% 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2em; /* 放大两倍 */
}
.right {
  height: 100%;
  flex: 0 0 25%;
  background-color: #00ffffaa;
  /* 左上 ~100°（较大内缩），左下 ~80°（较小内缩） */
  clip-path: polygon(18% 0, 100% 0, 100% 100%, 8% 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2em; /* 放大两倍 */
}
.clickable {
  cursor: pointer;
  user-select: none;
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
.clickable:active {
  transform: translateY(1px) scale(0.98);
  filter: brightness(0.98);
  box-shadow: inset 0 0 12px rgba(0,0,0,0.08);
}
</style>


